<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
  <title>XTech SVG Demo</title>  

  <style>  
    stop.begin { stop-color:yellow; }  
    stop.end { stop-color:green; }  
    body.invalid stop.end { stop-color:red; }  
    #err { display:none; }  
    body.invalid #err { display:inline; }  
  </style>  

  <script>  
    function signalError() {  
      document.getElementById('body').setAttribute("class", "invalid");  
    }  

    function grid()
    {
      var y = 0;
      while (y != 100)
      {
alert(y);
        var line = String.concat('<line x1="0" y1="', y, '" x2="100" y2="', y, '" style="stroke:blue;stroke-width:1;" />');
alert(line);
        document.write(line);
        y += 25;
      }
    }  
  </script>  

</head>  
<body id="body" style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;">  
  <form>  
    <fieldset>  
      <legend>HTML Form</legend>  
      <p>
        <label>Enter something:</label>  
        <input type="text"/>  
        <span id="err">Incorrect value!</span>
      </p>  
      <p>
        <button onclick="signalError();">Activate!</button>
      </p>  
    </fieldset>  
  </form>

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"  
    viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"  
    style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">  
    <linearGradient id="gradient">  
      <stop class="begin" offset="0%"/>  
      <stop class="end" offset="100%"/>  
    </linearGradient>  
    <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />  
    <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
    <circle cx="25" cy="75" r="10" style="fill:red;" />
    <script>
      grid();
    </script>
    
  </svg>  

</body>  
</html> 
